<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程管理</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/theme-chalk/index.css">
    <link rel="stylesheet" href="/static/global.css">
</head>
<body class="bg-gray">
<div id="app" class="admin" v-cloak>
    <div class="page-header">
        <div class="page-header_inner">
            <div class="admin-logo">
                <img src="/static/logo.png" style="width: 110px; height: auto ">
            </div>
            <div class="admin-header">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/admin/index.html' }">管理后台</el-breadcrumb-item>
                    <el-breadcrumb-item>课程管理</el-breadcrumb-item>
                </el-breadcrumb>
                <div class="header-link">
                    <el-link :underline="false" href="/user/account.html">返回个人中心</el-link>
                    <el-link :underline="false" href="/logout.html">退出</el-link>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body" style="display: flex">
        <div class="page-side">
            <el-menu default-active="course" class="admin-menu" background-color="#273043">
                <el-menu-item index="index">
                    <a href="/admin/index.html"><i class="el-icon-data-analysis"></i> 概况总览</a>
                </el-menu-item>
                <el-submenu index="resource">
                    <template slot="title">
                        <i class="el-icon-receiving"></i> 素材中心
                    </template>
                    <el-menu-item index="resource-video"><a href="/admin/video.html">视频</a></el-menu-item>
                    <el-menu-item index="resource-image"><a href="/admin/image.html">图片</a></el-menu-item></el-menu-item>
                    <el-menu-item index="resource-carousel"><a href="/admin/carousel.html">轮播图</a></el-menu-item></el-menu-item>
                </el-submenu>
                <el-menu-item index="user">
                    <a href="/admin/userList.html"><i class="el-icon-user"></i> 用户管理</a>
                </el-menu-item>
                <el-menu-item index="course">
                    <a href="/admin/courseList.html"><i class="el-icon-reading"></i> 课程管理</a>
                </el-menu-item>
                <el-submenu index="tools" disabled>
                    <template slot="title">
                        <i class="el-icon-suitcase"></i> 助学工具
                    </template>
                    <el-menu-item index="tools-1">问答</el-menu-item>
                    <el-menu-item index="tools-2">作业</el-menu-item>
                    <el-menu-item index="tools-3">题库</el-menu-item>
                    <el-menu-item index="tools-4">考试</el-menu-item>
                </el-submenu>
            </el-menu>
        </div>
        <div class="page-main">
            <div class="admin-panel padding-20">
                <div class="panel-header">
                    <el-form :inline="true" :model="query">
                        <el-form-item>
                            <el-input v-model="query.name" placeholder="名称" :clearable="true"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="query.teacher" placeholder="老师" :clearable="true"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="load(1)"><i class="el-icon-search"></i></el-button>
                        </el-form-item>
                        <el-button type="primary" style="float: right" @click="createCourse">发布课程</el-button>
                    </el-form>
                </div>

                <div class="panel-body no-padding">
                    <el-table :data="table.list" stripe border>
                        <el-table-column type="index" width="50" align="center"></el-table-column>
                        <el-table-column label="课程" min-width="650px">
                            <template slot-scope="scope">
                                <div class="course-list-item" style="background-color: transparent">
                                    <el-image :src="scope.row.poster" class="course-item_poster"></el-image>
                                    <div class="course-item_text" style="width: 400px">
                                        <el-link :underline="false" class="course-title" :href="'/admin/courseDetail.html?courseId=' + scope.row.id">
                                            {{scope.row.name}}
                                        </el-link>
                                        <div>
                                            {{scope.row.desc}}
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="teacher" label="老师" min-width="150"></el-table-column>
                        <el-table-column label="总课时" width="100" align="center">
                            <template slot-scope="scope">
                                {{scope.row.hour}} 小时
                            </template>
                        </el-table-column>
                        <el-table-column prop="students" label="报名学员" width="100" align="center"></el-table-column>
                        <el-table-column prop="createdTime" label="发布时间" width="140" align="center">
                            <template slot-scope="scope">
                                {{scope.row.createdTime | date}}
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="80" align="center">
                            <template slot-scope="scope">
                                <el-link type="primary" size="small" :href="'/admin/courseDetail.html?courseId=' + scope.row.id">详情</el-link>
                            </template>
                        </el-table-column>
                    </el-table>

                    <el-pagination :current-page="table.page"
                                   :page-size="table.size"
                                   :total="table.total"
                                   :hide-on-single-page="true"
                                   @current-change="load"
                                   layout="total, prev, pager, next, jumper"
                                   class="mm_pagination"
                                   background>
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>

    <el-dialog title="发布课程" :visible.sync="createCourseDialog.show" width="600px" :close-on-click-modal="false">
        <el-form :model="createCourseDialog.form" label-width="80px">
            <el-form-item label="课程名">
                <el-input v-model="createCourseDialog.form.name" placeholder="课程名" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item label="课程简介">
                <el-input type="textarea" v-model="createCourseDialog.form.desc" placeholder="课程简介" maxlength="100" rows="5" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="课程封面">
                <el-select v-model="createCourseDialog.form.poster"
                           placeholder="选择课程封面（需要提前在素材中心中上传）"
                           style="width: 100%">
                    <el-option
                            v-for="item in createCourseDialog.images"
                            :key="item.id"
                            :label="item.name"
                            :value="item.url">
                        <div style="display: flex; justify-content: space-between">
                            <image :src="item.url" style="height: 80px;"></image>
                            <div>
                                <div style="font-size: 14px; font-weight: bold">{{item.name}}</div>
                                <div style="text-align: right">{{item.size | size}}</div>
                            </div>
                        </div>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="授课老师">
                <el-input v-model="createCourseDialog.form.teacher" placeholder="授课老师"课程封面></el-input>
            </el-form-item>
            <el-form-item label="总课时">
                <el-input-number :controls="false" v-model="createCourseDialog.form.hour" placeholder="总课时（小时）" :min="1"></el-input-number>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button type="default" @click="createCourseDialog.show = false">取消</el-button>
            <el-button type="primary" @click="saveCourse">确 定</el-button>
        </span>
    </el-dialog>
</div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/index.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="/static/global.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            query:{},
            table:{},
            createCourseDialog: {
                show: false,
                form: {},
                images: []
            }
        },
        methods: {
            load: function (page = 1) {
                let vue = this;

                let url = `/admin/course/list?page=${page}&size=10`;

                axios.get(url, {params: vue.query}).then(resp => {
                    vue.table = resp.data || {};
                });
            },
            createCourse: function () {
                let vue = this;

                vue.createCourseDialog.form = {};
                vue.createCourseDialog.show = true;

                axios.get('/admin/resource/image').then(resp => {
                    vue.createCourseDialog.images = resp.data || [];
                });
            },
            saveCourse: function () {
                let vue = this;

                axios.post('/admin/course/create', vue.createCourseDialog.form).then(resp => {
                    vue.$message.success('保存成功');
                    vue.createCourseDialog.show = false;
                    vue.load();
                });
            }
        },
        mounted: function () {
            this.load();
        }
    })
</script>
</html>